var React = require('react');
// import { Table, Button } from 'antd';
import {Table} from 'antd';
var $=require('jquery');

class App extends React.Component {
  state = {
    selectedRowKeys: [],  // Check here to configure the default column
    loading: false,
    lists:[],
  };
  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      });
    }, 1000);
  }
  render() {
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    const data = [];
  
    for (let i = 0; i <this.state.lists.length; i++) {
      data.push({
        key: i,
        name: this.state.lists[i].title,
        age: this.state.lists[i].author,
        address: this.state.lists[i].album_title,
        shic:this.state.lists[i].publishtime,
      });
    }  
    const columns = [{
        title: '歌曲',
        dataIndex: 'name',
      }, {
        title: '歌手',
        dataIndex: 'age',
      }, {
        title: '专辑',
        dataIndex: 'address',
      }, {
        title: '发行时间',
        dataIndex: 'shic',
      }];
    return (     
      <div>
        <Table  columns={columns} dataSource={data} />
      </div>
    );
  }
    componentDidMount(){
        var that=this;
        $.ajax({
            type:"GET",
            url:'http://tingapi.ting.baidu.com/v1/restserver/ting?format=json&calback=&from=webapp_music&method=baidu.ting.billboard.billList&type=11&size=20&offset=0',
            dataType:"jsonp",
            success:function(data){
                var arr=data.song_list;
                that.setState({
                    lists:arr                   
                })              
            }   
    	  })
    }
  
}

module.exports=App;